.design-training-objectives {
  height: rem(448);
  width: rem(729);
  background: url('../image/new/design-bg.png') right top no-repeat;
  background-size: rem(373) auto;
  .chat {
    position: relative;
    img {
      display: block;
    }
    .content {
      position: absolute;
      top: rem(20);
      text-align: center;
      left: 0;
      width: 100%;
      font-size: rem(22);
      line-height: 1.2;
      color: #333;
      span {
        color: #00C2DE;
      }
    }
  }
  .chat-1 {
    width: rem(491);
    height: rem(84);
    margin-left: rem(48);
  }
  .chat-2 {
    width: rem(471);
    height: rem(84);
    margin-left: rem(43);
    margin-top: rem(12);
    margin-bottom: rem(11);
  }
  .chat-3 {
    width: rem(616);
    height: rem(84);
    margin-left: rem(17);
    margin-bottom: rem(17);
  }
  .chat-4 {
    width: rem(501);
    height: rem(84);
    margin-left: rem(35);
  }
}

.wide-range-professions {
  width: 100%;
  height: rem(500);
  background: url('../image/new/design-bg2.png') center no-repeat;
  background-size: 100% 100%;
  .bt {
    font-size: rem(26);
    color: #FFFFFF;
    width: rem(290);
    line-height: rem(64);
    font-size: rem(26);
    text-align: center;
  }
  .infos {
    width: rem(560);
    margin-left: rem(40);
    overflow: hidden;
    .item {
      margin-top: rem(24);
      overflow: hidden;
      @include flex(row,flex-start,center);
      font-size: rem(20);
      line-height: 1.4;
      color: #333;
      .label {
        width: rem(102);
        font-weight: bold;
      }
      .content {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}

.art-training-objectives {
  @include flex(row,center,space-between);
  flex-wrap: wrap;
  padding-bottom: rem(27);
  .item {
    width: rem(328);
    height: rem(60);
    line-height: rem(60);
    font-size: rem(24);
    color: #fff;
    margin-bottom: rem(18);
    background: #00C2DE;
    border-radius: rem(30);
    text-align: center;
  }
}

.indoor-solution {
  @include flex(row,flex-start,center);
  padding-bottom: rem(50);
  .left {
    width: rem(221);
    margin-right: rem(19);
    .dot {
      width: 100%;
      line-height: rem(72);
      font-size: rem(28);
      padding-left: rem(20);
      text-align: center;
      background: url('../image/new/indoor-dot2.png') center no-repeat;
      background-size: 100% 100%;
      color: #FB9C48;
      &:first-child {
        margin-top: rem(9);
        margin-bottom: rem(22);
      }
      &.active {
        color: #FFFFFF;
        background-image: url('../image/new/indoor-dot.png')
      }
    }
  }
  .right {
    flex: 1;
    background: #F3F3F3;
    border-radius: rem(20);
    box-sizing: border-box;
    padding: rem(20) rem(28);
    box-sizing: border-box;
    height: rem(252);
    font-size: rem(20);
    color: #000000;
    line-height: 1.4;
    text-align: justify;
    @include flex;
    .icons {
      width: 100%;
      @include flex(row,center,space-between);
      flex-wrap: wrap;
      box-sizing: border-box;
      .item {
        @include flex(column);
        margin: rem(4) 0;
        width: rem(120);
        .icon {
          width: rem(72);
          height: rem(72);
        }
        .name {
          font-size: rem(18);
          color: #000000;
          line-height: 1.2;
          margin-top: rem(4);
        }
      }
    }
  }
}

.indoor-courses {
  padding-left: rem(28);
  overflow: hidden;
  padding-bottom: rem(18);
  .item {
    border: 1px solid #FF852B;
    border-right: none;
    border-radius: rem(20) 0px 0px rem(20);
    padding: rem(18) 0 rem(18) rem(36);
    box-sizing: border-box;
    margin-bottom: rem(32);
    @include flex;
    .left {
      flex: 1;
      .title {
        font-size: rem(28);
        color: #333;
        line-height: 1.1;
        margin-bottom: rem(30);
      }
      .content {
        font-size: rem(22);
        line-height: rem(32);
        height: rem(96);
        overflow: hidden;
        color: #666;
        text-align: justify;
      }
    }
    .right {
      width: rem(304);
      height: rem(197);
      margin-left: rem(24);
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.indoor-dimensions-container {
  overflow: hidden;
  .major-list {
    @include flex(row,flex-satrt,flex-end);
    flex-wrap: wrap;
    .item {
      height: rem(48);
      border: 1px solid #D1D1D1;
      box-sizing: border-box;
      border-radius: rem(24);
      padding: 0 rem(26);
      margin-bottom: rem(20);
      margin-left: rem(10);
      @include flex;
      color: #333333;
      font-size: rem(20);
      &:first-child {
        margin-left: 0;
      }
    }
  }
  .study-software {
    @include flex;
    margin-bottom: rem(38);
    .left {
      font-size: rem(28);
      color: #FB9C48;
      width: rem(142);
    }
    .right {
      flex: 1;
      overflow: hidden;
      @include flex(row,center,space-between);
      .item {
        height: rem(48);
        border: 1px solid #D1D1D1;
        box-sizing: border-box;
        border-radius: rem(24);
        padding: 0 rem(26);
        @include flex;
        color: #333333;
        font-size: rem(20);
      }
    }
  }
  .list {
    @include flex(row,flex-start,space-between);
    flex-wrap: wrap;
    padding-bottom: rem(30);
    .item {
      padding: rem(20) rem(18);
      margin-bottom: rem(16);
      width: rem(330);
      .top {
        height: rem(180);
        background: #FFFFFF;
        border-radius: rem(10) rem(10) 0px 0px;
        @include flex(column);
        font-size: rem(30);
        text-align: center;
        line-height: 1.8;
      }
      .content-box {
        padding-left: rem(8);
        padding-top: rem(28);
        padding-bottom: rem(32);
        font-size: rem(22);
        color: #FFFFFF;
        line-height: 1.4;
      }
      .direction-bt {
        font-size: rem(22);
        color: #fff;
        line-height: 1.2;
        margin-bottom: rem(14);
      }
      .direction-content {
        height: rem(108);
        background: #FFFFFF;
        border-radius: 0px 0px rem(10) rem(10);
        font-size: rem(20);
        @include flex(column);
        line-height: 1.6;
      }
    }
    .item-1 {
      background: linear-gradient(170deg, #FA7500 1%, #FB9C48 100%);
    }
    .item-2 {
      background: linear-gradient(0deg, #6082E5 1%, #274EBF 100%);
    }
    .item-3 {
      background: linear-gradient(0deg, #26B7C4 1%, #00A2B1 100%);
    }
    .item-4 {
      background: linear-gradient(0deg, #E15959 1%, #D13535 100%);
    }
  }
}

.market-understand-container {
  overflow: hidden;
  padding-bottom: rem(48);
  .understand-list {
    width: rem(694);
    @include flex(row,center,space-between);
    margin: auto;
    padding: rem(8) 0 rem(34);
    .item {
      width: rem(338);
      height: rem(470);
      background: #FFFFFF;
      box-shadow: 0px 0px 0.08rem 0px rgba(190,190,190,0.56);
      .top {
        @include flex(row,center,space-between);
        margin-top: rem(38);
        margin-bottom: rem(40);
        .title {
          width: rem(204);
          height: rem(52);
          line-height: rem(52);
          text-align: center;
          color: #fff;
          font-size: rem(28);
          font-style: italic;
          background: url('../image/new/market-line.png') center no-repeat;
          background-size: cover;
        }
        .rank {
          width: rem(72);
          height: auto;
          margin-right: rem(26);
        }
      }
      .bottom {
        width: rem(270);
        margin: auto;
        @include flex(row,flex-start,center);
        .dot {
          width: rem(20);
          height: rem(20);
          margin-right: rem(10);
          margin-top: rem(4);
        }
        .info {
          flex: 1;
          overflow: hidden;
          font-size: rem(20);
          color: #000000;
          line-height: 1.4;
          text-align: justify;
        }
      }
    }
  }
  .understand-item {
    height: rem(374);
    background: url('../image/new/market-bg.png') center no-repeat;
    background-size: cover;
    @include flex(row,flex-start,center);
    padding-top: rem(56);
    padding-left: rem(43);
    padding-right: rem(43);
    box-sizing: border-box;
    .left {
      flex: 1;
      overflow: hidden;
      .title {
        font-size: rem(26);
        color: #000;
        font-weight: bold;
        line-height: 1.5;
        margin-bottom: rem(30);
        span {
          color: #3B57C6;
        }
      }
      .content {
        font-size: rem(20);
        color: #000000;
        line-height: 1.3;
        text-align: justify;
      }
    }
    .right {
      width: rem(244);
      height: rem(244);
      overflow: hidden;
      margin-left: rem(40);
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.market-major-list {
  @include flex(row,center,space-between);
  flex-wrap: wrap;
  padding-bottom: rem(25);
  .item {
    width: rem(317);
    height: rem(342);
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    box-sizing: border-box;
    border-radius: rem(20);
    margin-bottom: rem(26);
    @include flex(column);
    .icon {
      margin-top: rem(20);
      margin-bottom: rem(14);
      width: rem(70);
      height: rem(70);
    }
    .title {
      font-size: rem(26);
      color: #000000;
      line-height: 1.2;
      font-weight: bold;
      margin-bottom: rem(6);
      span {
        padding-right: rem(12);
      }
    }
    .content {
      width: rem(264);
      text-align: center;
      font-size: rem(20);
      color: #666666;
      line-height: 1.4;
    }
  }
}


.analyst-path-container {
  overflow: hidden;
  .module-1 {
    margin-bottom: rem(47);
    overflow: hidden;
    .top {
      @include flex(row,flex-start,space-between);
      position: relative;
      z-index: 2;
      .left {
        display: block;
        width: rem(98);
        height: rem(132);
        margin-top: rem(9);
        margin-left: rem(78);
      }
      .right {
        display: block;
        width: rem(376);
        height: rem(56);
        margin-right: rem(69);
      }
    }
    .bottom {
      width: rem(638);
      box-sizing: border-box;
      padding: rem(10) rem(44) 0 rem(40);
      border-radius: rem(20);
      border: 1px solid #eee;
      margin-left: rem(50);
      margin-top: rem(-30);
      position: relative;
      &::before {
        content: '';
        width: 0;
        height: 0;
        border-left: calc(0.26rem + 1px) solid transparent;
        border-right: calc(0.26rem + 1px) solid transparent;
        border-bottom: calc(0.30rem + 1px) solid #eee;
        position: absolute;
        top: calc(-0.30rem - 1px);
        right: calc(0.76rem - 1px);
      }
      &::after {
        content: '';
        width: 0;
        height: 0;
        border-left: rem(26) solid transparent;
        border-right: rem(26) solid transparent;
        border-bottom: rem(30) solid #fff;
        position: absolute;
        top: rem(-30);
        right: rem(76);
      }
      .item {
        padding: rem(50) 0;
        @include flex(row,flex-start,center);
        border-bottom: 1px dashed #E9E9E9;
        &:last-child {
          border-bottom: none;
        }
        .dot {
          width: rem(66);
          height: rem(66);
          margin-right: rem(27);
        }
        .content {
          flex: 1;
          overflow: hidden;
          font-size: rem(24);
          text-align: justify;
          color: #333333;
          line-height: 1.4;
        }
        .lines {
          flex: 1;
          overflow: hidden;
          .sub {
            height: rem(74);
            @include flex;
            width: 100%;
            background: url('../image/new/analyst-bg1.png') center no-repeat;
            background-size: 100% 100%;
            font-size: rem(28);
            color: #333333;
            .c1 {
              color: #42058D;
            }
            .c2 {
              color: #FFA200;
            }
            .c3 {
              color: #FF2B01;
            }
          }
        }
      }
    }
  }
  .module-2 {
    padding-bottom: rem(20);
    .item {
      width: rem(672);
      height: rem(156);
      margin: 0 auto rem(28);
      background: url('../image/new/analyst-bg2.png') center no-repeat;
      background-size: cover;
      font-size: rem(20);
      color: #FFFFFF;
      text-align: left;
      box-sizing: border-box;
      @include flex(row,center,flex-start);
      position: relative;
      .check {
        width: rem(42);
        height: rem(42);
        position: absolute;
        top: rem(24);
        right: rem(50);
      }
      span {
        width: rem(570);
        margin-left: rem(80);
        position: relative;
        z-index: 2;
      }
    }
  }
}

.analyst-ability-container {
  padding: 0 rem(68) 0 rem(30);
  .item {
    @include flex(row,flex-start,center);
    position: relative;
    &::after {
      content: '';
      width: rem(4);
      height: calc(100% - 0.5rem);
      position: absolute;
      left: rem(23);
      bottom: 0;
      background-color: #FFF1F0;
    }
    .left {
      margin-right: rem(20);
      overflow: hidden;
      .icon {
        width: rem(50);
        height: rem(50);
      }
    }
    .right {
      flex: 1;
      overflow: hidden;
      .name {
        font-size: rem(24);
        color: #000000;
        font-weight: bold;
        margin-bottom: rem(10);
        line-height: 1.4;
      }
      .content {
        font-size: rem(20);
        color: #333333;
        line-height: 1.4;
        text-align: justify;
        padding-bottom: rem(44);
        box-sizing: border-box;
        min-height: rem(134);
      }
    }
  }
}

.graphic-explosion-container {
  padding: 0 rem(14);
  overflow: hidden;
  .swiper {
    height: rem(418);
    .swiper-slide {
      width: rem(377);
      margin: 0 rem(14);
      .title {
        width: 100%;
        height: rem(98);
        line-height: rem(98);
        text-align: center;
        border-radius: rem(10);
        color: #FFFFFF;
        font-size: rem(34);
        font-weight: bold;
      }
      .content {
        border-width: 1px;
        border-style: solid;
        border-top: none;
        border-radius: 0 0 rem(10) rem(10);
        height: rem(228);
        box-sizing: border-box;
        margin-top: rem(-10);
        padding: rem(44) rem(40) 0 rem(26);
        @include flex(row,flex-start,center);
        position: relative;
        .left {
          font-size: rem(36);
          line-height: 1;
          margin-right: rem(16);
        }
        .right {
          flex: 1;
          overflow: hidden;
          font-size: rem(20);
          color: #000000;
          line-height: 1.5;
          text-align: justify;
        }
      }
      .arrow {
        width: rem(44);
        height: rem(44);
        background: #FFFFFF;
        border-width: rem(4);
        border-style: solid;
        border-radius: 50%;
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        margin-left: rem(-22);
        bottom: rem(-22);
        font-size: rem(24);
        font-weight: bolder;
        @include flex;
      }
    }
    .swiper-scrollbar {
      bottom: rem(40);
      width: rem(70);
      left: 50%;
      margin-left: rem(-35);
      .swiper-scrollbar-drag {
        background-color: #ED4779;
      }
    }
  }
}
.graphic-dimensions-container {
  @include flex(row,center,space-between);
  flex-wrap: wrap;
  padding-bottom: rem(30);
  .item {
    width: rem(218);
    height: rem(512);
    background: #FFFFFF;
    box-shadow: 0px 0.02rem 0.08rem 0px rgba(179,179,179,0.51);
    border-radius: 0.10rem;
    margin: rem(10) 0;
    .top {
      @include flex(row,flex-end,center);
      line-height: rem(40);
      padding-top: rem(30);
      .label {
        font-size: rem(36);
        color: #FF4467;
        font-weight: bold;
      }
      .rank {
        font-size: rem(22);
        color: #DFDFDF;
        font-weight: bold;
        margin-left: rem(10);
      }
    }
    .name {
      font-size: rem(24);
      font-weight: bold;
      color: #000000;
      line-height: 1.2;
      position: relative;
      margin: rem(16) 0;
      text-align: center;
      span {
        position: relative;
        z-index: 2;
      }
      &::after {
        content: '';
        width: rem(100);
        height: rem(7);
        background: #FFE7E7;
        border-radius: rem(3);
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .list {
      padding-left: rem(26);
      .sub {
        @include flex;
        height: rem(40);
        .dot {
          width: rem(10);
          height: rem(10);
          border: 0.03rem solid #DEDEDE;
          box-sizing: border-box;
          border-radius: 50%;
          margin-right: rem(11);
          transition: all 300ms;
        }
        .text {
          flex: 1;
          overflow: hidden;
          font-size: rem(20);
          color: #000;
          transition: all 300ms;
        }
        &:active {
          .dot {
            border-color: #FF4467;
          }
          .text {
            color: #FF4467;
          }
        }
      }
    }
  }
}

.graphic-design-container {
  overflow: hidden;
  padding: 0 0 rem(46) rem(10);
  @include flex;
  .left {
    width: rem(211);
    height: rem(490);
    margin-right: rem(21);
    @include flex(column,center,space-between);
    .item {
      width: 100%;
      height: rem(42);
      background: url('../image/new/graphic-bg.png') left top no-repeat;
      background-size: 100% 200%;
      box-sizing: border-box;
      line-height: rem(42);
      text-align: center;
      font-size: rem(20);
      color: #FFFFFF;
      padding-left: rem(24);
      &.active {
        background-position-y: bottom;
      }
    }
  }
  .right {
    height: rem(490);
    flex: 1;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.hotel-career-container {
  @include flex(row,flex-start,space-between);
  flex-wrap: wrap;
  padding: rem(10) 0 rem(17);
  .item {
    width: rem(314);
    height: rem(520);
    margin-bottom: rem(30);
    box-sizing: border-box;
    padding: rem(6);
    .title {
      font-size: rem(28);
      color: #1F50BA;
      margin-bottom: rem(28);
    }
    .text {
      font-size: rem(20);
      color: #333333;
      line-height: rem(34);
      text-align: justify;
    }
    &.item-1 {
      box-shadow: 0px 0px 0.08rem 0px rgba(190,190,190,0.56);
      position: relative;
      .photo {
        height: rem(184);
        overflow: hidden;
        width: 100%;
        margin-bottom: rem(20);
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .content {
        padding: 0 rem(14);
        font-size: rem(22);
        line-height: rem(34);
        color: #333333;
        text-align: justify;
      }
      .line {
        width: rem(69);
        height: rem(9);
        background: #1F51BB;
        position: absolute;
        left: rem(22);
        bottom: rem(30);
      }
      .rank {
        color: #CCDCFF;
        font-size: rem(45);
        font-style: italic;
        position: absolute;
        right: rem(24);
        bottom: rem(20);
        line-height: 1.1;
        font-weight: bold;
      }
    }
  }
}

.hotel-advantage-container {
  overflow: hidden;
  @include flex(row,flex-start,space-between);
  flex-wrap: wrap;
  padding: rem(10) rem(10) rem(12);
  .item {
    width: rem(303);
    height: rem(319);
    background: #FFFFFF;
    margin-bottom: rem(40);
    box-shadow: 0px 0px 0.06rem 1px rgba(185,185,185,0.65);
    border-radius: 0px 0px rem(10) rem(10);
    .line {
      height: rem(8);
      width: 100%;
    }
    .icon {
      display: block;
      width: rem(88);
      height: rem(88);
      margin: rem(26) auto rem(40);
    }
    .name {
      font-size: rem(24);
      color: #000000;
      line-height: 1.2;
      margin-bottom: rem(18);
      text-align: center;
    }
    .content {
      width: rem(220);
      font-size: rem(20);
      color: #666666;
      text-align: center;
      margin: auto;
    }
  }
}

.hotel-popular-container {
  overflow: hidden;
  .item {
    width: 100%;
    height: rem(230);
    background: url('../image/new/hotel-bg.png') center no-repeat;
    background-size: 100% 100%;
    margin-bottom: rem(42);
    .title {
      height: rem(58);
      line-height: rem(58);
      font-size: rem(24);
      color: #FFFFFF;
      padding-left: rem(14);
    }
    .content {
      width: rem(620);
      font-size: rem(20);
      line-height: 1.5;
      color: #000000;
      margin: rem(24) auto 0;
      text-align: justify;
    }
  }
}

.economics-popular-container {
  padding: rem(10);
  @include flex(row,flex-start,space-between);
  flex-wrap: wrap;
  .item {
    width: rem(273);
    height: rem(335);
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0px 0.02rem 0.08rem 1px rgba(16,31,70,0.24);
    border-radius: rem(8);
    margin-bottom: rem(50);
    position: relative;
    .top {
      width: 100%;
      font-size: rem(24);
      color: #CDE0FF;
      text-align: right;
      line-height: rem(44);
      padding-right: rem(18);
      box-sizing: border-box;
    }
    .name {
      padding: 0 rem(36);
      font-size: rem(24);
      font-weight: bold;
      color: #013993;
      line-height: 1.2;
      margin-bottom: rem(18);
    }
    .content {
      padding: 0 rem(36);
      font-size: rem(20);
      color: #333333;
      line-height: 1.4;
      position: relative;
      z-index: 2;
    }
    .icon {
      position: absolute;
      width: rem(90);
      height: rem(90);
      right: rem(30);
      bottom: rem(80);
    }
    .extra {
      color: #FFA633;
      font-size: rem(20);
      position: absolute;
      right: rem(20);
      bottom: rem(44);
    }
  }
}

.economics-direction-list {
  padding-left: rem(28);
  padding-right: rem(29);
  box-sizing: border-box;
  .item {
    width: 100%;
    margin-bottom: rem(32);
    .top {
      width: rem(417);
      height: rem(123);
      background: url('../image/new/economics-bg1.png') center no-repeat;
      background-size: 100% 100%;
      position: relative;
      .rank {
        font-size: rem(24);
        font-style: italic;
        font-weight: bold;
        color: #fff;
        line-height: rem(40);
        padding-left: rem(22);
      }
      .name {
        font-size: rem(28);
        color: #013A95;
        font-style: italic;
        font-weight: bold;
        position: absolute;
        top: rem(16);
        left: rem(124);
      }
    }
    .bottom {
      width: rem(633);
      height: rem(195);
      margin-left: rem(42);
      margin-top: rem(-62);
      background: #FFFFFF;
      position: relative;
      z-index: 2;
      box-shadow: 0px 0.02rem 0.08rem 1px rgba(16,31,70,0.24);
      padding-top: rem(28);
      span {
        display: block;
        width: rem(560);
        margin: auto;
        font-size: rem(20);
        text-align: justify;
        line-height: 1.4;
      }
    }
  }
}

.economics-distribution-container {
  overflow: hidden;
  .m1 {
    width: rem(670);
    height: rem(474);
    margin: auto;
    background: url('../image/new/economics-bg2.png') center no-repeat;
    background-size: 100% 100%;
    @include flex(column);
    .item {
      width: rem(560);
      .top {
        @include flex(row,flex-end,flex-start);
        margin-bottom: rem(20);
        .label {
          width: rem(168);
          height: rem(47);
          line-height: rem(47);
          text-align: center;
          background: #F6C380;
          border-radius: rem(23);
          font-size: rem(24);
          color: #FFFFFF;
          font-weight: bold;
          font-style: italic;
          margin-right: rem(16);
        }
        .name {
          font-size: rem(22);
          color: #000000;
          font-style: italic;
          padding-bottom: rem(4);
          font-weight: bold;
        }
      }
      .bot {
        font-size: rem(20);
        color: #333333;
        line-height: 1.4;
        font-style: italic;
        margin-bottom: rem(28);
      }
    }
  }
  .photo {
    width: rem(581);
    margin: rem(-10) auto rem(20);
    display: block;
  }
}

.finance-prospects-container {
  padding: rem(10);
  .item {
    width: rem(691);
    background: #FFFFFF;
    box-shadow: 0px 0px 0.06rem 1px rgba(185,185,185,0.65);
    border-radius: rem(10);
    margin-bottom: rem(24);
    position: relative;
    box-sizing: border-box;
    padding: rem(40) rem(34);
    .name {
      font-size: rem(24);
      color: #103FC9;
      margin-bottom: rem(14);
      font-weight: bold;
    }
    .content {
      font-size: rem(20);
      color: #000000;
      line-height: 1.6;
      position: relative;
      z-index: 2;
    }
    .icon {
      width: rem(144);
      height: rem(110);
      position: absolute;
      top: rem(22);
      right: rem(24);
    }
  }
}

.finance-major-container {
  .main-bt {
    height: rem(75);
    line-height: rem(75);
    border-top: 1px dashed #FF7E00;
    border-bottom: 1px dashed #FF7E00;
    font-size: rem(20);
    color: #FF7E00;
    white-space: nowrap;
    margin-bottom: rem(28);
  }
  .major-list {
    @include flex(row,flex-start,space-between);
    flex-wrap: wrap;
    padding-bottom: rem(44);
    .item {
      width: 25%;
      height: rem(77);
      margin-bottom: rem(2);
      font-size: rem(20);
      color: #004CD8;
      @include flex;
    }
    .item-1 {
      padding: rem(5);
      @include flex;
      span {
        width: 100%;
        display: block;
        height: rem(66);
        border-radius: rem(33);
        box-sizing: border-box;
        border: 1px solid rgba(14,45,199,0.21);
        @include flex;
      }
      &:active {
        span {
          border-color: #004CD8;
        }
      }
    }
    .item-2 {
      background: url('../image/new/finance-radius.png') center no-repeat;
      background-size: 100% 100%;
    }
  }
  .introduce-wrap {
    @include flex;
    padding-bottom: rem(40);
    .left {
      margin-right: rem(32);
      width: rem(238);
      .item {
        @include flex;
        margin-bottom: rem(42);
        &:last-child {
          margin-bottom: 0;
        }
        .name {
          flex: 1;
          overflow: hidden;
          text-align: right;
          font-size: rem(22);
          color: #010101;
        }
        .icon {
          width: rem(73);
          height: rem(61);
          margin-left: rem(6);
        }
      }
    }
    .right {
      flex: 1;
      .top {
        width: 100%;
        height: rem(65);
        line-height: rem(65);
        text-align: center;
        background: url('../image/new/finace-bg.png') center no-repeat;
        background-size: 100% 100%;
        font-size: rem(26);
        color: #FFFFFF;
        font-weight: bold;
        margin-bottom: rem(10);
      }
      .box {
        height: rem(497);
        border: 1px dashed #004CD8;
        box-sizing: border-box;
        padding: rem(16) rem(16) 0;
        .photo {
          width: 100%;
          display: block;
          margin-bottom: rem(16);
        }
        .text {
          font-size: rem(20);
          color: #131313;
          line-height: 1.6;
          text-align: justify;
        }
      }
    }
  }
}

.education-major-container {
  .swiper {
    height: rem(486);
    .swiper-scrollbar {
      width: rem(70);
      height: rem(8);
      background: #ECECEC;
      border-radius: rem(4);
      left: 50%;
      bottom: rem(25);
      margin-left: rem(-35);
      .swiper-scrollbar-drag {
        background-color: #01C56C;
      }
    }
  }
  .swiper-slide {
    margin: 0 rem(14);
    width: rem(340);
    height: rem(422);
    border-bottom-width: rem(10);
    border-bottom-style: solid;
    box-sizing: border-box;
    @include flex(column,center,flex-satrt);
    .name {
      line-height: rem(56);
      padding: 0 rem(18);
      border: 1px solid #0089C1;
      border-radius: rem(30);
      font-size: rem(26);
      margin-top: rem(54);
      margin-bottom: rem(28);
    }
    .content {
      width: rem(260);
      font-size: rem(20);
      color: #333333;
      line-height: 1.5;
      text-align: justify;
    }
  }
}

.education-primary-container {
  padding-bottom: rem(40);
  .top {
    @include flex(row,flex-end,space-between);
    margin-bottom: rem(36);
    .txt {
      font-size: rem(32);
      color: #272658;
      font-weight: bold;
      padding-bottom: rem(20);
      width: rem(160);
    }
    .hao {
      width: rem(86);
      height: rem(135);
      margin-bottom: rem(11);
    }
    .photo {
      width: rem(332);
      height: rem(185);
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .bot {
    font-size: rem(20);
    color: #000000;
    line-height: 1.6;
    text-align: justify;
  }
}

.construct-architect-container {
  width: rem(713);
  height: rem(299);
  margin-left: rem(29);
  margin-bottom: rem(19);
  background: url('../image/new/construct-bg.png') center no-repeat;
  background-size: 100% 100%;
  position: relative;
  span {
    display: block;
    width: rem(388);
    font-size: rem(20);
    color: #333333;
    line-height: 1.6;
    position: absolute;
    top: rem(58);
    right: rem(44);
  }
}

.construct-design-container {
  overflow: hidden;
  @include flex(row,flex-start,space-between);
  flex-wrap: wrap;
  .item {
    width: rem(294);
    height: rem(313);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    @include flex(column,center,flex-start);
    margin-bottom: rem(36);
    .name {
      margin-top: rem(80);
      font-size: rem(24);
      font-weight: bold;
      margin-bottom: rem(14);
    }
    .content {
      font-size: rem(20);
      color: #666666;
      text-align: center;
      line-height: 1.4;
    }
    .btn {
      margin-top: rem(32);
      width: rem(140);
      height: rem(42);
      line-height: rem(42);
      text-align: center;
      background: linear-gradient(0deg, #ED6504 0%, #F9B551 100%);
      border-radius: rem(20);
      font-size: rem(20);
      color: #FFFFFF;
    }
  }
}

.construct-industry-container {
  .txt {
    width: rem(694);
    border: 1px dashed #9B9B9B;
    border-radius: rem(20);
    margin: 0 auto rem(32);
    box-sizing: border-box;
    padding: rem(24) rem(26);
    font-size: rem(20);
    color: #000000;
    text-align: justify;
    line-height: 1.5;
  }
  .swiper {
    height: rem(420);
    .swiper-scrollbar {
      width: rem(70);
      height: rem(8);
      background: #ECECEC;
      border-radius: rem(4);
      left: 50%;
      margin-left: rem(-35);
      bottom: rem(30);
      .swiper-scrollbar-drag {
        background-color: #01C56C;
      }
    }
  }
  .swiper-slide {
    width: rem(374);
    margin: 0 rem(15);
    &:first-child {
      margin-left: rem(30);
    }
    &:last-child {
      margin-right: rem(30);
    }
    .photo {
      width: 100%;
      height: rem(268);
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .btn {
      margin-top: rem(28);
      width: rem(194);
      height: rem(48);
      line-height: rem(48);
      text-align: center;
      background: linear-gradient(0deg, #2A5CC2 0%, #558CFF 100%);
      border-radius: rem(24);
      font-size: rem(20);
      color: #FFFFFF;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.mechanical-introduce-container {
  overflow: hidden;
  padding-bottom: rem(34);
  .item {
    width: 100%;
    height: rem(151);
    background: #FBFBFB;
    border-radius: rem(10);
    @include flex;
    margin-bottom: rem(18);
    padding: 0 rem(28);
    .icon {
      width: rem(92);
      height: rem(92);
      margin-right: rem(32);
    }
    .info {
      flex: 1;
      overflow: hidden;
      height: rem(115);
      box-sizing: border-box;
      border-left: 1px solid #F0F0F0;
      @include flex(column,flex-start,center);
      padding-left: rem(28);
      .name {
        font-size: rem(24);
        color: #333333;
        font-weight: bold;
        margin-bottom: rem(12);
      }
      .content {
        color: #333333;
        font-size: rem(20);
        line-height: 1.6;
        text-align: justify;
      }
    }
  }
}

.mechanical-learn-container {
  padding-bottom: rem(52);
  .swiper-slide {
    width: rem(300);
    height: rem(430);
    margin: 0 rem(11);
    @include flex(column,center,flex-start);
    .name {
      margin-top: rem(66);
      font-size: rem(26);
      line-height: 1.1;
      margin-bottom: rem(20);
      color: #fff;
    }
    .content {
      width: rem(252);
      font-size: rem(20);
      line-height: rem(32);
      height: rem(214);
      color: #fff;
      text-align: justify;
      word-break: break-all;
    }
    .btn {
      width: rem(171);
      height: rem(46);
      line-height: rem(46);
      text-align: center;
      background: #326DF9;
      color: #fff;
      border-radius: rem(23);
      font-size: rem(18);
    }
    &:first-child {
      margin-left: rem(31);
      .name {
        color: #0C57CE;
      }
      .content {
        color: #000000;
      }
    }
    &:last-child {
      margin-right: rem(31);
      .btn {
        background-color: #fff;
        color: #326DF9;
      }
    }
  }
}

.mechanical-study-container {
  overflow: hidden;
  padding-bottom: rem(32);
  .item {
    background: rgba(#1F51BB,0.04);
    border-radius: rem(120);
    padding: rem(30) rem(64);
    @include flex(column,flex-start,center);
    border: 1px dashed #1F51BB;
    margin-bottom: rem(24);
    box-sizing: border-box;
    .name {
      font-size: rem(28);
      color: #326DF9;
      margin-bottom: rem(14);
      font-weight: bold;
    }
    .content {
      font-size: rem(20);
      line-height: rem(32);
      color: #333333;
      word-break: break-all;
    }
  }
}

.accounting-popular-container {
  padding-bottom: rem(26);
  overflow: hidden;
  .item {
    width: rem(612);
    height: rem(429);
    margin: 0 auto rem(16);
    box-sizing: border-box;
    &.item-1 {
      padding-left: rem(40);
      padding-right: rem(56);
      background: url('../image/new/accounting-bg1.png') center no-repeat;
      background-size: 100% 100%;
      .bt {
        margin-left: rem(-11);
      }
      .t1, .t2 {
        color: #EC4123;
      }
    }
    &.item-2 {
      padding-left: rem(49);
      padding-right: rem(44);
      background: url('../image/new/accounting-bg2.png') center no-repeat;
      background-size: 100% 100%;
      .t1, .t2 {
        color: #3B56D9;
      }
    }
    .bt {
      font-size: rem(26);
      color: #FFFFFF;
      line-height: rem(62);
      margin-bottom: rem(30);
    }
    .t1 {
      font-size: rem(24);
      margin-bottom: rem(36);
      font-weight: bold;
    }
    .t2 {
      font-size: rem(20);
      margin-top: rem(28);
      margin-bottom: rem(8);
      font-weight: bold;
    }
    .content {
      font-size: rem(20);
      color: #666666;
      line-height: 1.6;
      text-align: justify;
    }
  }
}

.accounting-needs-container {
  overflow: hidden;
  height: rem(798);
  background: url('../image/new/accounting-bg3.png') center no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: rem(58);
  padding-left: rem(89);
  padding-right: rem(94);
  padding-bottom: rem(49);
  .bt {
    font-size: rem(30);
    font-weight: bold;
    color: #F95E37;
    line-height: rem(34);
    padding-left: rem(23);
    box-sizing: border-box;
    border-left: rem(8) solid #F95E37;
    margin-bottom: rem(32);
  }
  .list {
    width: 100%;
    @include flex(row,flex-start,space-between);
    .item {
      width: rem(254);
      .top {
        background-color: #fff;
        height: rem(254);
        border-radius: rem(10);
        overflow: hidden;
        margin-bottom: rem(30);
        @include flex(column,flex-start,center);
        .sub {
          margin: rem(6) 0;
          @include flex(column,flex-start,flex-start);
          .label {
            min-width: rem(112);
            padding: 0 rem(26);
            height: rem(41);
            line-height: rem(41);
            font-size: rem(24);
            color: #FFFFFF;
            background: #F95E37;
            border-radius: 0px rem(20) rem(20) 0px;
          }
          .content {
            font-size: rem(20);
            color: #000000;
            line-height: 1.2;
            padding: rem(14) rem(12);
          }
        }
      }
      .bot {
        background-color: #fff;
        border-radius: rem(10);
        height: rem(341);
        padding: 0 rem(26);
        box-sizing: border-box;
        overflow: hidden;
        @include flex(column,center,flex-satrt);
        .name {
          height: rem(42);
          border: 1px solid #FFD0C4;
          box-sizing: border-box;
          border-radius: rem(21);
          font-size: rem(24);
          color: #F95E37;
          @include flex;
          padding: 0 rem(24);
          margin-top: rem(38);
          margin-bottom: rem(24);
        }
        .content {
          width: rem(200);
          font-size: rem(20);
          color: #333333;
          line-height: 1.5;
          text-align: justify;
        }
      }
    }
  }
}
.accounting-international-container {
  overflow: hidden;
  padding-bottom: rem(49);
  .list {
    width: rem(692);
    background: #FFFFFF;
    box-shadow: 0px 0px 0.35rem 0px rgba(190,190,190,0.53);
    border-radius: rem(10);
    margin-top: rem(39);
    margin-left: auto;
    margin-right: auto;
    padding: rem(38) rem(38) rem(46);
    box-sizing: border-box;
    .label {
      margin-bottom: rem(14);
      width: rem(145);
      height: rem(42);
      border: 1px dashed #F95E37;
      border-radius: rem(21);
      font-size: rem(22);
      color: #F95E37;
      font-weight: bold;
      @include flex;
    }
    .content {
      font-size: rem(20);
      line-height: 1.5;
      color: #000000;
      margin: rem(18) 0;
    }
    .photo {
      display: block;
      width: 100%;
    }
  }
}

.science-course-container {
  @include flex(row,flex-start,space-between);
  flex-wrap: wrap;
  margin-bottom: rem(-14);
  .item {
    width: rem(214);
    height: rem(144);
    border-radius: rem(20);
    box-sizing: border-box;
    border: 1px solid #fff;
    @include flex(column);
    margin-bottom: rem(38);
    &:active {
      border-color: #1662F3;
    }
    .icon {
      width: rem(50);
      height: rem(50);
      margin-bottom: rem(16);
    }
    .name {
      font-size: rem(20);
      text-align: center;
      color: #333333;
      line-height: 1.1;
    }
  }
}

.science-direction-container {
  .photo {
    width: 100%;
    display: block;
    margin-bottom: rem(10);
  }
  .job-list {
    padding-bottom: rem(16);
    .item {
      padding: rem(22) 0;
      border-bottom: 1px dashed #939CD9;
      line-height: 1.2;
      .name {
        font-size: rem(24);
        color: #1662F3;
        margin-bottom: rem(16);
      }
      .content {
        font-size: rem(20);
        color: #333333;
      }
    }
  }
  .train-list {
    padding-bottom: rem(14);
    overflow: hidden;
    .item {
      margin-top: rem(26);
      height: rem(279);
      // box-shadow: 0px 0px 0.07rem 0px rgba(0,0,0,0.31);
      border: 1px solid #eee;
      border-radius: rem(10);
      @include flex;
      .left {
        width: rem(200);
        @include flex(column);
        .icon {
          width: rem(38);
          height: rem(38);
          margin-bottom: rem(14);
        }
        .name {
          font-size: rem(28);
          color: #1662F3;
          line-height: 1.1;
          margin-bottom: rem(12);
          font-weight: bold;
        }
        .line {
          width: rem(49);
          height: rem(5);
          background: #1662F3;
        }
      }
      .right {
        flex: 1;
        height: rem(208);
        border-left: 1px dashed #BED4FF;
        padding-left: rem(30);
        box-sizing: border-box;
        @include flex(row,center,flex-start);
        span {
          width: rem(418);
          font-size: rem(20);
          color: #333333;
          line-height: 1.4;
          text-align: justify;
        }
      }
    }
  }
}

.city-direction-container {
  padding: 0 rem(54) rem(47);
  .list {
    @include flex(row,flex-start,space-between);
    flex-wrap: wrap;
    padding-bottom: rem(15);
    .item {
      width: rem(300);
      margin-bottom: rem(29);
      box-sizing: border-box;
      .icon {
        display: block;
        margin: 0 auto rem(-24);
        width: rem(121);
        height: rem(121);
      }
      .box {
        width: 100%;
        height: rem(275);
        background: #FFFFFF;
        box-shadow: 0px 0.02rem 0.08rem 1px rgba(16,31,70,0.24);
        border-radius: rem(10);
        box-sizing: border-box;
        .name {
          padding-top: rem(54);
          font-size: rem(26);
          font-weight: bold;
          text-align: center;
          color: #000000;
          margin-bottom: rem(16);
        }
        .content {
          font-size: rem(20);
          color: #333333;
          text-align: center;
          width: rem(220);
          margin: auto;
          line-height: 1.5;
        }
      }
    }
  }
  .wrapper {
    width: 100%;
    background: url('../image/new/city-check.png') center rem(158) no-repeat #FFFFFF;
    background-size: rem(292) rem(282);
    box-shadow: 0px 0.02rem 0.08rem 1px rgba(16,31,70,0.24);
    border-radius: rem(10);
    padding: rem(56) rem(24) rem(32);
    .bt {
      font-size: rem(30);
      color: #0066A3;
      line-height: 1.1;
      text-align: center;
      margin-bottom: rem(34);
      font-weight: bold;
    }
    .requires {
      overflow: hidden;
      .item {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #C7EAFF;
        border-radius: rem(52);
        font-size: rem(20);
        line-height: 1.4;
        color: #000000;
        padding: rem(24) rem(36);
        text-align: center;
        margin-bottom: rem(16);
      }
    }
  }
}

.city-train-container {
  overflow: hidden;
  padding-bottom: rem(39);
  .list {
    background-color: #E0F1F2;
    padding: rem(20) rem(44) rem(12);
    .item {
      width: rem(659);
      height: rem(172);
      background: #FFFFFF;
      border-radius: rem(20);
      margin: 0 auto rem(22);
      padding: rem(31) rem(32) 0;
      box-sizing: border-box;
      position: relative;
      .top {
        @include flex(row,center,space-between);
        .bt {
          width: rem(357);
          height: rem(42);
          @include flex(row,center,space-between);
          color: #FFFFFF;
          text-align: center;
          font-size: rem(24);
          background: url('../image/new/city-bg.png') center no-repeat;
          background-size: 100% 100%;
          .rank {
            width: rem(72);
            font-weight: bold;
          }
          .name {
            width: rem(266);
          }
        }
        .btn {
          width: rem(124);
          height: rem(42);
          line-height: rem(42);
          text-align: center;
          font-size: rem(24);
          background: #0066A3;
          color: #fff;
          border-radius: rem(21);
          position: absolute;
          top: rem(30);
          right: rem(32);
        }
      }
      .content {
        font-size: rem(20);
        color: #5C6781;
        line-height: 1.4;
        margin-top: rem(14);
        padding-left: rem(66);
        box-sizing: border-box;
      }
    }
  }
}

.computer-develop-container {
  overflow: hidden;
  padding-bottom: rem(36);
  .list {
    overflow: hidden;
    padding-bottom: rem(7);
    .item {
      width: 100%;
      height: rem(93);
      box-sizing: border-box;
      padding-right: rem(52);
      background: url('../image/new/computer-bg.png') center no-repeat;
      background-size: 100% 100%;
      @include flex;
      margin-bottom: rem(27);
      .left {
        width: rem(164);
        margin-right: rem(24);
        font-size: rem(24);
        color: #FFFFFF;
        text-align: center;
        font-weight: bold;
      }
      .right {
        flex: 1;
        overflow: hidden;
        line-height: 1.4;
        font-size: rem(20);
        color: #000000;
        text-align: justify;
      }
    }
  }
  .photo {
    display: block;
    width: 100%;
    margin-bottom: rem(28);
  }
  .rate-list {
    overflow: hidden;
    @include flex(row,flex-start,space-between);
    flex-wrap: wrap;
    .item {
      @include flex;
      width: rem(218);
      height: rem(52);
      border: 1px solid #005CFF;
      border-radius: rem(26);
      box-sizing: border-box;
      margin-bottom: rem(20);
      .left {
        flex: 1;
        overflow: hidden;
        font-size: rem(24);
        text-align: center;
        color: #333333;
      }
      .right {
        width: rem(68);
        height: rem(38);
        line-height: rem(38);
        text-align: center;
        background: #005CFF;
        border-radius: rem(19);
        font-size: rem(22);
        color: #fff;
        margin-right: rem(10);
      }
    }
  }
  
}

.computer-learn-container {
  padding: rem(10) rem(28) rem(20);
  overflow: hidden;
  @include flex(row,flex-start,space-between);
  flex-wrap: wrap;
  .item {
    width: rem(208);
    height: rem(192);
    background: #FFFFFF;
    box-shadow: 0px 0px 0.07rem 0px rgba(0,0,0,0.31);
    border-radius: rem(18);
    @include flex(column);
    margin-bottom: rem(30);
    .icon {
      width: rem(58);
      height: rem(58);
      margin-bottom: rem(18);
    }
    .name {
      font-size: rem(24);
      color: #000000;
      line-height: 1.1;
      margin-bottom: rem(14);
    }
    .btn {
      width: rem(134);
      height: rem(40);
      line-height: rem(40);
      text-align: center;
      font-size: rem(20);
      color: #FFFFFF;
      background: url('../image/new/computer-btn.png') center no-repeat;
      background-size: 100% 100%;
    }
  }
}

.computer-future-container {
  @include flex(row,flex-start,space-between);
  flex-wrap: wrap;
  padding: 0 rem(54) rem(28);
  .item {
    margin-bottom: rem(19);
    .photo {
      display: block;
      width: rem(97);
      height: rem(97);
      margin: 0 auto rem(-62);
    }
    .future-box {
      width: rem(288);
      height: rem(283);
      background: #FFFFFF;
      box-shadow: 0px 0px 0.08rem 0px rgba(190,190,190,0.48);
      border-radius: rem(10);
      text-align: center;
      .name {
        font-size: rem(24);
        color: #000000;
        font-weight: bold;
        padding-top: rem(88);
        padding-bottom: rem(10);
      }
      .content {
        font-size: rem(20);
        color: #333333;
      }
      .extra {
        margin-top: rem(4);
        font-size: rem(23);
        color: #FF8206;
        font-weight: bold;
      }
      .btn {
        width: rem(208);
        height: rem(46);
        line-height: rem(46);
        text-align: center;
        background: #1881FF;
        border-radius: rem(23);
        display: block;
        font-size: rem(18);
        color: #fff;
        margin: rem(24) auto 0;
      }
    }
  }
}
